<template>
  <div>
    <div class="ding">
      <img :src="imgsrc" alt="" />
      <router-link to="category/search" class="total"
        >商品搜索,共239款好物</router-link
      >
    </div>

    <!-- 侧边导航栏 -->
    <van-sidebar v-model="activeKey" class="bar">
      <van-sidebar-item
        v-for="item in categoryNav"
        :key="item.id"
        :title="item.name"
        @click="clever(item.id)"
      />
    </van-sidebar>

    <!-- 对应导航的内容 -->

    <div class="content">
      <div class="header">
        <img :src="currentOne.banner_url" alt="" />
      </div>

      <div class="title">
        <span class="l">--</span
        ><span class="fen">{{ currentOne.name }}分类</span
        ><span class="r">--</span>
      </div>

      <div class="goods">
        <ul>
          <li
            v-for="item in currentOne.subList"
            :key="item.id"
            @click="goodsDesc(item)"
          >
            <img :src="item.wap_banner_url" alt="" />
            <div class="name">{{ item.name }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/category/index.js";
import { current } from "@/api/category/list/index.js";
export default {
  data() {
    return {
      imgsrc: require("../../assets/img/icons/search.png"),
      categoryNav: [],
      currentOne: [],
      activeKey: 0
      // a: "商品搜索,共239款好物"
    };
  },
  computed: {},
  async created() {
    var result = await index();
    this.categoryNav = result.categoryList;

    var resultList = await current({
      id: result.categoryList[0].id
    });
    this.currentOne = resultList.data.currentOne;
    console.log(resultList.data.currentOne);
  },
  mounted() {},

  methods: {
    clever(num) {
      var currentId = String(num);
      current({
        id: currentId
      }).then(res => {
        // console.log(res);
        this.currentOne = res.data.currentOne;
      });
    },
    goodsDesc(item) {
      // console.log(item);
      this.$router.push({
        path: "/categorylist",
        query: {
          id: item.id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.total {
  color: #333;
}
.ding {
  width: 300px;
  height: 30px;
  background-color: #f5f5f5;
  margin-left: 30px;
  border-radius: 10px;
  margin-top: 10px;
  overflow: hidden;
}
.ding img {
  width: 10px;
  height: 10px;
  margin-top: 10px;
}
.ding span {
  line-height: 30px;
}
.bar {
  margin-top: 50px;
}
.header {
  width: 290px;
  height: 150px;
  background-color: #fff;
  position: absolute;
  top: 50px;
  left: 85px;
}
.header img {
  height: 150px;
  width: 280px;
}
.fen {
  position: absolute;
  top: 200px;
  color: #333;
}
.l {
  position: absolute;
  top: 200px;
  color: #333;
  left: 180px;
}
.r {
  position: absolute;
  top: 200px;
  color: #333;
  left: 238px;
}
.goods ul {
  background-color: #fff;
  width: 290px;
  height: 500px;
  position: absolute;
  top: 230px;
  left: 85px;
}
.goods li {
  background-color: #fff;
  width: 80px;
  height: 100px;
  float: left;
  margin-right: 10px;
}
.goods img {
  width: 60px;
  height: 60px;
}
</style>